<template>
  <div style="background: #fff">
    <div style="float: left;width: 45%;padding-right: 10px">
      <div class="title">原始内容</div>
      <div v-html="oldData"/>
    </div>
    <div style="float: left;width: 45%;padding-right: 10px">
      <div class="title">最终内容</div>
      <div class="doc-data" v-html="newData"/>
    </div>
  </div>
</template>

<script>
  import moment from 'moment';

  export default {
    name: "doc-info",
    data() {
      return {
        oldData: '<ol class="custom_num list-paddingleft-1">\n' +
          '    <li class="list-num-1-1 list-num-paddingleft-1">\n' +
          '        <p style="text-align: center;">\n' +
          '            <span style="font-size: 24px;">文书标题</span>\n' +
          '        </p>\n' +
          '    </li>\n' +
          '</ol>\n' +
          '<p>\n' +
          '    <span contenteditable="true" class="case-doc-caseDate bottom-border" placeholder="日期" style="width: auto;min-width: 30px"></span>，' +
          '违法人<span contenteditable="true" class="case-doc-input bottom-border" style="width: auto;min-width: 30px"></span>' +
          '在<span contenteditable="true" class="case-doc-address bottom-border" placeholder="地点位置" style="width: auto;min-width: 30px"></span>产生违法记录，' +
          '执法人<span contenteditable="true" class="case-doc-punisher bottom-border" placeholder="执法人员" style="width: auto;min-width: 30px"></span>\n' +
          '</p>',
        newData: ''
      }
    },
    mounted() {
      // console.log(dom)
      this.newData = this.oldData;
      this.$nextTick(() => {
        if (document.querySelector('.doc-data .case-doc-caseDate')) {
          document.querySelector('.doc-data .case-doc-caseDate').innerHTML = moment().format('YYYY年MM月DD日 HH时mm分ss秒');
        }
        if (document.querySelector('.doc-data .case-doc-input')) {
          document.querySelector('.doc-data .case-doc-input').innerHTML = '自定义输入数据区';
        }
        if (document.querySelector('.doc-data .case-doc-litigant')) {
          document.querySelector('.doc-data .case-doc-litigant').innerHTML = '张三';
        }
        if (document.querySelector('.doc-data .case-doc-punisher')) {
          document.querySelector('.doc-data .case-doc-punisher').innerHTML = '张四，张五';
        }
        if (document.querySelector('.doc-data .case-doc-address')) {
          document.querySelector('.doc-data .case-doc-address').innerHTML = '河南省郑州市';
        }
        if (document.querySelector('.doc-data .case-doc-caseType')) {
          document.querySelector('.doc-data .case-doc-caseType').html = '违法类型';
          document.querySelector('.doc-data .case-doc-caseType').html = 'xxx违法行为';
        }
      })
    }
  }
</script>

<style lang="scss">
.bottom-border{
  display: inline-block;
  min-width: 50px;
  padding: 0 10px;
}
</style>
